<!--<!DOCTYPE html>-->
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			html,body{
				background: black;
				width:100%;
				height: 100%;
				overflow:hidden;
			}
			.game{
				max-height: 768px;
				max-width: 1366px;
				width: 100%;
				height: 100%;
				background: url(images/game_bg_2_hd.jpg);
				background-size:100% ;
				margin: 0 auto;
				position: relative;
				overflow:hidden;
			}
			.bottom{
				width:765px ;
				height: 72px;
				background: url(images/bottom-bar.png);
				position: absolute;
				bottom: -2px;
				left:280px;
			}
			#cannon{
				width: 74px;
				height: 75px;
				background: url(images/cannon1.png);
				overflow: hidden;
			}
			#minus{
				width: 44px;
				height: 31px;
				background:url(images/cannon_minus.png);
				position: absolute;
				left:45%;
				bottom:4px
			}
			#plus{
				width: 44px;
				height: 31px;
				position: absolute;
				background: url(images/cannon_plus.png);
				left:62%;
				bottom:4px
			}
			.num{
				width: 20px;
				height: 24px;
				position: absolute;
				left: 20px;
				top:42px;
			}
			#bullet{
				position: absolute;
				left:414px;
				bottom:14px;
				display: none;
			}
		</style>
	</head>
	<body>
		<div class="game">
			<div class="bottom" id="dibu">
				<div id="cannon"></div>
				<img src="images/bullet1.png" id="bullet"/>
				<div id="minus"></div>
				<div id="plus"></div>
				<div id="number">
					<div class="num" id="number1"></div>
					<div class="num" id="number2"></div>
					<div class="num" id="number3"></div>
					<div class="num" id="number4"></div>
					<div class="num" id="number5"></div>
					<div class="num" id="number6"></div>
				</div>
				
			</div>
		</div>
	</body>
	<script src="Fish.js"></script>
	<script>
//		window.onload=function(){
		var ww=document.documentElement.clientWidth;
		var wh=document.documentElement.clientHeight;
		var cannon=document.getElementById("cannon");
		var dibu=document.getElementById("bottom");
		var minus=document.getElementById("minus");
		var number1=document.getElementById("number1");
		var number2=document.getElementById("number2");
		var number3=document.getElementById("number3");
		var number4=document.getElementById("number4");
		var number5=document.getElementById("number5");
		var number6=document.getElementById("number6");
		var bullet=document.getElementById("bullet");
			
		var i=1;
		minus.onmousedown=function(){
			minus.style.background="url(images/cannon_minus_down.png)";
		}
		minus.onmouseup=function(){
			minus.style.background="url(images/cannon_minus.png)";
			if(i==1){
				i=7;
				cannon.style.background="url(images/cannon"+i+".png)";
			}else{
				i--;
				cannon.style.background="url(images/cannon"+i+".png)";
				
			}
		}
		
		plus.onmousedown=function(){
			plus.style.background="url(images/cannon_plus_down.png)";
		}
		plus.onmouseup=function(){
			plus.style.background="url(images/cannon_plus.png)";
			if(i==7){
				i=1;
				cannon.style.background="url(images/cannon"+i+".png)";
			}else{
				i++;
				cannon.style.background="url(images/cannon"+i+".png)";
				
			}
		}
		
		cannon.style.position="absolute";
		cannon.style.left=ww/2-298+"px";
		cannon.style.bottom=0;
		console.log(ww);
		document.onclick=function(e){
			if(e.target==plus||e.target==minus){
				return;
			}
			var x=e.pageX;
			var y=e.pageY;
			console.log(x);
			console.log(y);
			var a=x-parseInt(cannon.style.left);
			var b=wh-y;
			var deg=Math.atan(a/b)*180/Math.PI;
			console.log(deg);
			cannon.style.transform="rotate("+deg+"deg)";
			
			bullet.style.position="absolute";
			bullet.style.left="414px";
			bullet.style.bottom="14px";
			bullet.style.display="block"
			var x1=parseInt(bullet.style.left);
			var a1=x-x1;
			var b1=wh-y;
			var deg1=Math.atan(a1/b1)*180/Math.PI;
			bullet.style.transform="rotate("+deg+"deg)";
			var rate=a1/b1;
			var b2=0;
			setInterval(function(){
				b2=b2+10;
				var a2=b2*rate;
				a2=a2+x1;
				bullet.style.left=a2;
				bullet.style.bottom=b2;
			},30)
			
			 
		}
		
		number1.style.left="18px";
		number1.style.top="44px";
		number1.style.background="url(images/number_black.png) 0px 24px" ;
		number2.style.left="42px";
		number2.style.top="44px";
		number2.style.background="url(images/number_black.png) 0px 48px" ;
		number3.style.left="65px";
		number3.style.top="44px";
		number3.style.background="url(images/number_black.png) 0px 72px" ;
		number4.style.left="88px";
		number4.style.top="44px";
		number4.style.background="url(images/number_black.png) 0px 96px" ;
		number5.style.left="112px";
		number5.style.top="44px";
		number5.style.background="url(images/number_black.png) 0px 120px" ;
		number6.style.left="135px";
		number6.style.top="44px";
		number6.style.background="url(images/number_black.png) 0px 240px" ;
		
		
	</script>
</html>
